<template>
  <div class="favorite-list">
    <el-row :gutter="20" v-if="favorites.length > 0">
      <el-col :span="6" v-for="item in favorites" :key="item.id">
        <el-card :body-style="{ padding: '10px' }" shadow="hover">
          <!-- 图片 -->
          <div class="image-container">
            <el-image
              style="width: 100%; height: 180px"
              :src="item.attractionImageUrl"
              :preview-src-list="[item.attractionImageUrl]"
              :preview-teleported="true"
              fit="cover"
            />
          </div>

          <!-- 内容 -->
          <div class="content-container">
            <h3>{{ item.attractionName }}</h3>
            <p>
              <el-icon><location /></el-icon>{{ item.attractionAddress }}
            </p>
            <p class="mt10">收藏时间：{{ item.createTime }}</p>
          </div>

          <!-- 操作按钮 -->
          <div class="action-container">
            <el-button type="primary" icon="view" @click="handleDetail(item)">详情</el-button>
            <el-button type="danger" icon="star" @click="handleCancel(item)">取消收藏</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-empty v-else description="暂无收藏" />
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useFavoriteApi } from '@/api/favorite/index'

const router = useRouter()
const favorites = ref([])

const favoriteApi = useFavoriteApi()
// 加载收藏数据
const loadFavorites = async () => {
  favorites.value = await favoriteApi.getList()
}

// 查看详情
const handleDetail = (item) => {
  router.push({ name: 'AttractionDetail', params: { id: item.attractionId } })
}

// 取消收藏
const handleCancel = async (item) => {
  await favoriteApi.cancel(item.attractionId)
  ElMessage.success('已取消收藏')
  await loadFavorites()
}

onMounted(() => {
  loadFavorites()
})
</script>

<style scoped>
.image-container {
  overflow: hidden;
  border-radius: 4px;
}

.content-container {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}

.content-container h3 {
  margin: 0 0 10px 0;
}

.action-container {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
}
</style>
